<template>
  <a-form :form="form">
    <!-- phone -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="手机号"
    >
      <a-input
        type="tel"
        v-decorator="[
          'phone',
          { rules: [{ required: true, message: '请填写你的手机号' }] },
        ]"
        placeholder="请填写你的手机号"
      />
    </a-form-item>
    <!-- 密码 -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="密码"
    >
      <a-input
        type="password"
        v-decorator="[
          'password',
          { rules: [{ required: true, message: '请填写你的密码' }] },
        ]"
        placeholder="请填写你的密码"
      />
    </a-form-item>

    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-button type="primary" @click="login">
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { post } from '../../utils/request';
import { message } from 'ant-design-vue';
import { jm } from './../../utils/safe';

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
export default {
  data() {
    return {
      checkNick: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
    };
  },
  methods: {
    login() {
      this.form.validateFields(err => {
        if (!err) {
          console.info('success');
          // 请求登陆接口
          const params = this.form.getFieldsValue();
          params.password = jm(params.password);
          post('/user/login', params)
            .then((data)=>{
                const { token, userInfo } = data || {};
                localStorage.setItem('login_token', token)
                localStorage.setItem('user_info', JSON.stringify(userInfo));
                message.success('登陆成功！');
                console.log(this.$route)
                const { callback } = this.$route.query || {};
                this.$router.history.push(callback);
            })

        }
      });
    },
  },
};
</script>